<template>
    <div class="content">
        <div class="w100 haed bbg pr">
            <img @click="goHome" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">活动发布</p>
        </div>
        <main class="pr brs">
            <div class="header w100">
                <div :class="activeNum == 1?'active':''" @click="getUp">已上架</div>
                <div :class="activeNum == 2?'active':''" @click="getOut">未上架</div>
            </div>
            <ul class="shelfOk" v-show="activeNum == 1">
                <li @click.self="lookInfo(el)" class="pt40 pb40" v-for="el in soldOutList" :key="el.id">
                    <div class="box-left">
                        <p>{{el.title}}</p>
                        <span>{{el.releaseTime | formDate}}</span>
                    </div>
                    <div class="box-right">
                        <button @click="soldOut(el.id,el.state)">{{el.state | state}}</button>
                    </div>
                </li>
            </ul>
            <ul class="shelfOff" v-show="activeNum == 2">
                <li @click.self="lookInfo(el)" class="pt40 pb40" v-for="el in soldUpList" :key="el.id">
                    <div class="box-left">
                        <p>{{el.title}}</p>
                        <p :class="el.audit == 0?'fail':el.audit == 1?'ok':'audit'">{{el.audit|audit}}</p>
                        <span>{{el.explainDate | formDate}}</span>
                    </div>
                    <div class="box-right">
                        <button @click="soldUp(el.id,el.state)">{{el.state | state}}</button>
                    </div>
                </li>
            </ul>
        </main>
        <div class="replase">
           
            <button @click="addActive">
                <img src="../../assets/img/activity/activity-add.png" alt="">发布活动
            </button>
        </div>
    </div>
</template>
<script>
import {informationAll,upAndDown} from '../../api/index'
import { Notify } from 'vant';
import 'vant/lib/notify/style';
export default{
    data(){
        return{
            activeNum:1,
            ListArr:[],
            soldOutList:[],  //  下架
            soldUpList:[],   //  上架
            isAudit:true,   //  审核中
            isOk:true,   //  审核成功
            isFail:true   //  审核失败
        }
    },
    mounted(){
        //  活动信息
        informationAll({
            pageSize: 12
        })
        .then(r=>{
            console.log(r);
            this.ListArr = r.data.list;
            this.getUp()
        })
    },
    methods:{
        //  跳转到发布活动
        addActive(){
            this.$router.push('activityRelease');
        },
        //  查看详情
        lookInfo(el){
            this.$router.push({
                path:'/activityInfo',
                query:{el}
            });
        },
        //  上架
        getUp(){
            this.activeNum = 1
            this.soldOutList = this.ListArr.filter(el =>{
                return el.state == 0
            })
        },
        //  下架
        getOut(){
            this.activeNum = 2
            this.soldUpList = this.ListArr.filter(el =>{
                return el.state == 1
            })
        },
        //  下架
        soldOut(id,state){
            console.log(id,state);
            //  活动信息
            upAndDown({
                id:id,
                state:state
            })
            .then(r=>{
                console.log(r);
                 //  消息提示
                if(r.code == 200){
                    Notify({ type: 'success', message: r.data })
                }
            })
        },
         //  上架
         soldUp(id,state){
            console.log(id,state);
            //  活动信息
            upAndDown({
                id:id,
                state:state
            })
            .then(r=>{
                console.log(r);
                 //  消息提示
                if(r.code == 200){
                    Notify({ type: 'success', message: r.data })
                }
            })
        },
        //  返回首页
        goHome(){
            this.$router.push('/');
        }
    },
    filters:{
        state(val){
            if(val  == 0){
                return '下架'
            }else{
                return '上架'
            }
        },
        audit(val){
            if(val  == 0){
                return '审核失败'
            }else if(val == 1){
                return '审核成功'
            }else{
                return '审核中'
            }
        },
        // 时间数据过滤
        formDate(val) {
            const d = new Date(val); // val 为表格内取到的后台时间
            const month =d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
            const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
            const hours = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
            const min = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
            const sec = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
            const times = `${d.getFullYear()}-${month}-${day} ${hours}:${min}:${sec}`;
            return times;
        },
    }
}
</script>
<style scoped>
main{background-color: #fff;margin: -292rem 20rem 210rem;padding: 0 28rem;}

main .header{font-size: 32rem;text-align: center;;display: flex;justify-content: center;padding: 40rem 0 21rem;border-bottom: 5px solid #f7f7f7;}
main .header div{width: 173rem;padding: 20rem 0;background-color: #f2f2f2;color: #2f81fa;line-height: 32rem;}
main .header div:first-child{border-top-left-radius: 36rem;border-bottom-left-radius: 36rem;}
main .header div:last-child{border-top-right-radius: 36rem;border-bottom-right-radius: 36rem;}
main .header div.active{color: #fff;background-color: #2f81fa;}

.ok{color: #23c062;}
.audit{color: #ff4000;}
.fail{color: #838383;}

main ul li{display: flex;justify-content: space-between;border-top: 2rem solid #f7f7f7;align-items: center;}
main ul li .box-left{font-size: 26rem;}
main ul li .box-left p{margin-bottom: 30rem;line-height: 26rem;}
main ul li .box-left span{margin-bottom: 40rem;color: #808080;line-height: 39rem;}
main ul li .box-right{width: 150rem;position: relative;}
main ul li .box-right button{width: 150rem;height: 50rem;background-color: #0662e6;color: #fff;font-size: 24rem;border: none;border-radius: 25rem;}

.replase{display: flex;justify-content: space-around;margin-bottom: 71rem;}
.replase button{width: 520rem;height: 70rem;border-radius: 35rem;border: none;background-color: #0863e7;font-size: 27rem;color: #fff;}
.replase button img{width: 27rem;height: 27rem;margin-right: 10rem;vertical-align: middle;}

</style>